<!DOCTYPE html>
<html lang="zh-CN">
{% load static %}
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>淘宝商品智能推荐系统</title>
    <!-- Bootstrap -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.9.1/lib/jquery/jquery.js"></script>
    <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.9.1/js/zui.min.js"></script>
    <link rel="stylesheet" href="../static/css/liuying.css">
    <link rel="stylesheet" href="../static/css/demo.css">
</head>
<body>
<div class="ALL" >
 <div class="top_nav" style="width: 100%;">
     <div class="nav_left" style="left: 0px">
          <a href="#"><span class="iconfont icon-zhuye title"></span>登录用户：{{ userName }}</a>
     </div>
<div class="nav_right" style="right: 0px">
    <a href="/outLogin" class="nav_a"><span class="iconfont icon-tuichudenglu title"></span>退出登录</a>
</div>
   </div>
</div>

<div class="box">
<div class="main_content">
    <h1 style="text-align:center;margin-top: 30px">欢迎来到淘宝智能推荐系统！</h1>
     <form action="/" method="get"  id="Search">
    <div class="search-box">
            <input type="text" name='keyword' value="{{ keyword }}" placeholder="搜索你喜欢的商品" class='search-txt'>
        <a onclick="document:Search.submit()" class='search-btn'>
            <span class='iconfont icon-sousuo'></span>
        </a>
    </div>
          </form>
</div>
</div>
    <div class="shop_content" >
    <div class="shop_falls" id="shop_falls">
        <h5 class="head_shop"><span class="hd"></span>商品</h5>
           {% for item in data %}
                <div class="shop_box">
            <img src="{{ item.image_url }}" alt="">
             <p class="p1"><span style="color: #ff503a;font-size: 14px">价格：{{ item.goods_price }}</span><span> 销量：{{ item.sales_counter }}</span></p>
            <p class="p1"><span style="color: #000000;font-size: 14px">评价总数：{{ item.evaluate_all }} 好评数：{{ item.evaluate_good }}</span></p>
            <p class="p1"><a href="{{ item.goods_url }}">{{ item.title }}</a></p>

            </div>
           {% endfor %}
        {% if size == 0 %}
            <h1 style="padding: 15px;font-size: 15px">
                没有相关商品信息
            </h1>
          {% else %}
        {% endif %}
    </div>
    </div>
<div class="open_classify" id="open_classify">
    <div class="classify_content">
            <div id = "wrap">
            <ul>
            {% for item in category %}
                <li class = "liA">
					<div class = "divA"></div>
					<a href="/?category={{ item.category }}">{{ item.category }}</a>
                     <div class = "divA1"></div>
				</li>
            {% endfor %}
            </ul>
    </div>
    </div>
</div>
<div class="sidebar">
       <div  class="active sidebar_content zhuye"> <span class="iconfont icon-zhuye"></span>推荐主页</div>

    <div id="open" class="sidebar_content" ><span class="iconfont icon-fenlei"></span>打开分类 </div>
    <a href="#" id="back_top" class="sidebar_content"><span class="iconfont icon-fanhuidingbu"></span>返回顶部 </a>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src='{% static 'js/zzsc.js' %}' type="text/javascript"></script>
</body>
<script>

    function showGoods(){
        $('#open').removeClass('active');
            $('.zhuye').addClass('active');
            $('#shop_falls').show();
            $('#open_classify').hide();
            $flag = 1;
    }
    function showType(){
         $('.zhuye').removeClass('active');
            $('#open').addClass('active');
            $('#shop_falls').hide();
            $('#open_classify').show();
            $flag = 0;
    }
    $('.zhuye').click(function () {
        if ($flag == 0) {
            showGoods();
        } else if ($flag == 1) {
           showType();
        }
    })

    $('#open').click(function () {
        if ($flag == 0) {
              showGoods();
        } else if ($flag == 1) {
             showType();
        }
    });
     var $flag;
     $(document).ready(function(){
         let state ={{ state }};
          $flag=state;
            if (state === 1) {
               showGoods();
            } else {
               showType();
            }
        });
</script>
		<script type="text/javascript">
		$(document).ready(function(){
			$('.divA1').eq($(this).index()).animate({top:'0'},5)
		})
			$('li').mouseenter(function(){
				$(this).css('background-color','rgb(24,68,142)')
				$('.divA').eq($(this).index()).animate({top:'0'},300)
				$('.divA').eq($(this).index()).animate({top:'100%'},150)
				$('.divA1').eq($(this).index()).animate({top:'100%'},150)
				$(this).find('.divA2').animate({top:'100%'},300)
			})
			$('li').mouseleave(function(){
				$('.divA1').eq($(this).index()).animate({top:'0'},150)
				$('.divA').eq($(this).index()).animate({top:'-100%'},10)
				$(this).find('.divA2').animate({top:'0'},150)
				$(this).css('background','rgb(40,100,187)')
			})
		</script>
</html>